<template>
  <div>
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogDisP"
      width="960px"
      top="50vh"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      custom-class="samples-dialog"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <!-- esc按钮和点击遮罩不会关闭弹窗，需要设置配置项 -->
      <el-row class="samples-dialog-box" style="margin-bottom:20px">
        <el-col :span="24">
          <el-row :gutter="10">
            <el-collapse-transition>
              <el-col ref="moreSearch" :lg="17" class="samples-searchBar-wrapper" :class="{'samples-show-more':ismore}">
                <el-col :lg="8" :xl="8">
                  <el-input
                    v-model="searchList.code"
                    size="small"
                    placeholder="合同编码"
                    clearable
                    class="samples-search-input"
                  />
                </el-col>
                <el-col :lg="8" :xl="8">
                  <el-input
                    v-model="searchList.name"
                    size="small"
                    placeholder="合同名称"
                    clearable
                    class="samples-search-input"
                  />
                </el-col>
                <el-col :lg="8" :xl="8">
                  <el-input
                    v-model="searchList.partyName"
                    size="small"
                    placeholder="单位名称"
                    clearable
                    class="samples-search-input"
                  />
                </el-col>

                <el-col :lg="16" :xl="16">
                  <el-date-picker
                    v-model="timeArr"
                    value-format="yyyyMMdd"
                    size="small"
                    style="width:100%"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-col>
              </el-col>
            </el-collapse-transition>
            <el-col :lg="7">
              <el-button size="small" type="primary" plain class="samples-search-btn" @click="searchBtn()">
                <i class="el-icon-search" />
              </el-button>
              <el-button size="small" type="text" class="samples-search-btn samples-ismore-button" @click="moreClick">
                MORE
                <i class="samples-search-icon" :class="[ismore?'el-icon-arrow-up':'el-icon-arrow-down']" />
              </el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 这里是合同选择列表 -->
      <el-row class="samples-dialog-box" style="max-height: 400px;overflow: auto;padding-top: 0px;">
        <selectTable :data-objects="dataObjects" @childSay="listenToMyBoy" @sonTableQuery="faTableQuery" />
      </el-row>
      <el-row class="samples-dialog-footer samples-mt-20">
        <el-row class="samples-float-right">
          <el-button size="small" type="primary" plain @click="handleClose">取 消</el-button>
          <el-button size="small" type="primary" @click="commitMultiple">提 交</el-button>
        </el-row>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import selectTable from './selectTable'
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
export default {
  components: {
    selectTable
  },
  props: {
    // detailTable: {
    //   type: Boolean,
    //   default: false
    // }
    dialogDisP: {
      type: Boolean,
      required: false
    },
    dialogtitle: {
      type: String,
      required: true
    },
    classifyId: {
      type: String,
      default: ''
    }
  },
  //   watch(){

  //   },
  data() {
    return {
    // 子组件返回出来选择中的值
      multipleSelection: [],
      dataObjects: {},
      ismore: false,
      timeArr: [],
      searchList: {
        code: '',
        name: '',
        partyName: '',
        classifyId: '',
        time: '',
        page: 0,
        pageSize: 10,
        typed: false
      }
    }
  },
  watch: {
    dialogDisP: {
      handler: function(val, oldval) {
        if (val) {
          this.getList()
        }
      },
      immediate: true, // 关键
      deep: true
    }

  },
  mounted() {
    // if (this.$route.query.isTag != true) {

    // }
  },
  methods: {
    handleClose() {
      // this.dialogDisP = false
      this.$emit('child-say', false)
      this.searchList = {
        code: '',
        name: '',
        partyName: '',
        classify: '',
        time: '',
        page: 0,
        pageSize: 10,
        typed: false
      }
    },
    moreClick() {
      this.ismore = !this.ismore
      const ref = this.$refs.moreSearch.$el
      if (this.ismore) {
        ref.style.height = ref.scrollHeight + 'px'
      } else {
        ref.style.height = '32px'
      }
    },
    searchBtn() {
      this.searchList.page = 1
      this.getList()
    },
    getList() {
      if (this.dialogtitle == '选择收入合同') {
        this.searchList.typed = true
      } else if (this.dialogtitle == '选择支出合同') {
        this.searchList.typed = false
      } else {
        console.log('?????????   你选的什么合同？')
      }
      // if (this.searchList.timeArr.length > 0) {
      //   this.searchList.time = this.searchList.timeArr[0] + '-' + this.searchList.timeArr[0]
      // } else {
      //   this.searchList.time = ''
      // }
      if (!this.timeArr) {
        this.timeArr = []
      }
      if (this.timeArr.length > 0) {
        this.searchList.time = this.timeArr[0] + '-' + this.timeArr[1]
      } else {
        this.searchList.time = ''
      }
      this.searchList.classifyId = this.classifyId
      contractCorrelationApi.choseContract(this.searchList).then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.dataObjects = res.data
        }
      })
    },
    faTableQuery(val) {
      this.searchList.page = val.page
      this.searchList.pageSize = val.pageSize
      this.getList()
    },
    listenToMyBoy(multipleSelection) {
      console.log('选择列表传过来的值multipleSelection', multipleSelection)
      this.multipleSelection = multipleSelection
    },
    commitMultiple() {
      console.log('我把值传到列表this.multipleSelection', this.multipleSelection)
      this.$emit('addMultiple', this.multipleSelection)
      this.handleClose()
    }

  }
}
</script>
